<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="renderer" content="webkit">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <title>go8商城</title>
    <link rel="stylesheet" href="/style/style.css">
	<style>
		.container {
    width: 1226px;
    *zoom: 1;
    margin-right: auto;
    margin-left: auto;
}
.container:before, .container:after {
    content: " ";
    display: table;
}
.container:after {
    clear: both;
}
.buy-succ-box .goods-content {
    float: left;
}
.buy-succ-box .goods-img {
    float: left;
    width: 64px;
    height: 64px;
}
.buy-succ-box .goods-info {
    float: left;
    margin-left: 20px;
}
.buy-succ-box .goods-info .name, .buy-succ-box .goods-info .price {
    margin-right: 15px;
    font-size: 14px;
    color: #757575;
}
.buy-succ-box .actions {
    float: right;
}
.buy-succ-box .actions .hide {
    display: none;
}
.buy-succ-box .actions p {
    text-align: right;
    color: red;
    margin: 0;
    font-size: 12px;
}
.hide {
    display: none !important;
}
p, pre {
    margin: 1em 0;
}
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.buy-succ-box .actions .btn-line-gray {
    background: none;
}
.buy-succ-box .actions .btn {
    width: 180px;
    margin-left: 12px;
    margin-top: 5px;
}
.buy-succ-box .actions .btn {
    width: 180px;
    margin-left: 12px;
    margin-top: 5px;
}
.btn {
    display: inline-block;
    *zoom: 1;
    *display: inline;
    width: 158px;
    height: 38px;
    padding: 0;
    margin: 0;
    border: 1px solid #b0b0b0;
    font-size: 14px;
    line-height: 38px;
    text-align: center;
    color: #b0b0b0;
    cursor: pointer;
    -webkit-transition: all .4s;
    transition: all .4s;
}
.buy-succ-box .actions .btn-line-gray:hover {
    background: #fff;
    color: #757575;
}
.btn:hover {
    text-decoration: none;
    color: #b0b0b0;
}
a:hover {
    color: #ff6700;
    text-decoration: none;
}
a:active, a:hover {
    outline: 0;
}
a {
    color: #757575;
    text-decoration: none;
}
.btn-primary {
    background: #ff6700;
    border-color: #ff6700;
    color: #fff;
}
.btn-line-gray {
    border-color: #b0b0b0;
    background: #fff;
    color: #757575;
}
	</style>
</head>

<body>
    <!-- 顶部栏目 -->
	<div id="header" th:insert="header :: header"></div>
	<!-- 搜索 -->
	<div id="search" th:replace="header :: search"></div>
    <div class="wrap">
		<div class="container" id="paySuccess">
			 <Alert type="success">
			 	<div class="buy-succ-box clearfix">
		            <div class="goods-content" id="J_goodsBox"> 
						<div class="goods-img"> 
							<img src="/images/success.png" width="64" height="64">
						</div> 
						<div class="goods-info"> 
							<h3>您已成功付款！</h3> 
							<span class="name"></span> 
						</div>
					</div>
		        </div>
		        <template slot="desc">
		        	 <div style="padding:40px;font-size: 14px">
		                <p class="">收货地址：{{order.ship.province+order.ship.city+order.ship.area+order.ship.street+order.ship.shipAddress+" "+order.ship.shipName+" "+order.ship.phone}}</p>
		                <p style="color:red">实付款：￥{{order.finalPayMoney}} 元</p>
		            </div>
		        </template>
		    </Alert>
	    </div>
    </div>
    <div id="footer" th:insert="footer :: copy"></div>
    <script th:inline="javascript">
    	var vuePaySuccess = new Vue({
    		el:"#paySuccess",
    		data:{
    			orderId:/*[[${orderId}]]*/ 0,
    			order:{finalPayMoney:0,ship:{shipName:'',shipAddress:'',province:'',city:'',area:'',street:'',phone:'',zip:''}}
    		},
    		methods:{
    			
    		},
    		mounted:function(){
    			//该生命周期发生时，对象还没有创建完成，所以无法使用全局变量名来访问该对象如：vuePaySuccess，只能使用this
    			
    		}
    	})
    	
    	jQuery.ajax({
			url:GO8.DN.ROOT+"order/"+vuePaySuccess.orderId,
			type:'get',
			dataType:'json',
			async: true,
			success:function(res){
				if(res.status.code == 2000 && res.data){
					console.log("get order info success")
					vuePaySuccess.order.finalPayMoney = res.data.finalPayMoney
					vuePaySuccess.order.ship.shipName = res.data.ship.shipName
					vuePaySuccess.order.ship.shipAddress = res.data.ship.shipAddress
					vuePaySuccess.order.ship.province = res.data.ship.province
					vuePaySuccess.order.ship.city = res.data.ship.city
					vuePaySuccess.order.ship.area = res.data.ship.area
					vuePaySuccess.order.ship.street = res.data.ship.street
					vuePaySuccess.order.ship.phone = res.data.ship.phone
					vuePaySuccess.order.ship.zip = res.data.ship.zip
				}
			}
		})
		
		//清除已付款购物车中商品，并删除服务器
		jQuery.ajax({
   			url:GO8.DN.ROOT+"order/"+vuePaySuccess.orderId+'/detail',
   			type:'get',
   			dataType:'json',
   			success:function(res){
   				if(res.status.code == 2000 && res.data){
   					console.log("get order details success")
   					let carts = JSON.parse(Cookies.get(GO8.CART_KEY))
   					//delete ids
   					let ids = []
   					for(let i=0;i<res.data.length;i++){
   						for(let k=0;k<carts.length;k++){
   							if(res.data[i].productId == carts[k].id){
   	   							carts.splice(k,1)
   	   							break
   	   						}
   						}
   						ids.push(res.data[i].productId)
   					}
   					console.log(carts)
   					Cookies.set(GO8.CART_KEY,JSON.stringify(carts))
   					ids = ids.join(",")
   					console.log(ids)
   					jQuery.ajax({
			   			url:GO8.DN.ROOT+"cart/sync",
			   			type:'post',
			   			data:{'userId':vueUser.user.id,"ids":ids},
			   			dataType:'json',
			   			success:function(res){
			   				if(res.status.code == 2000 && res.data){
			   					console.log("cart sync success")
			   				}
			   			}
			  		})
   				}
   			}
  		})		
    </script>
</body>

</html>
